<template>
  <view class="goods_list">
    <navigator url="/pages/search/search">
      <uSearch></uSearch>
    </navigator>
    <u-tabs
      active-color="#ea4350"
      bar-width="100"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view class="goods_conent">
      <view class="changeTabs" v-for="(tab, index) in list" :key="tab.name">
        <block v-if="current === index">
          <navigator
            class="goods_item"
            v-for="item in goodsList"
            :key="item.goods_id"
            :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
          >
            <u-row>
              <u-col span="4">
                <view class="goods_img">
                  <u-image
                    width="191rpx"
                    height="191rpx"
                    :src="item.goods_small_logo"
                  ></u-image>
                </view>
              </u-col>
              <u-col span="8">
                <view class="goods_right">
                  <view class="goods_title">{{ item.goods_name }}</view>
                  <view class="goods_price"> ￥{{ item.goods_price }} </view>
                </view>
              </u-col>
            </u-row>
          </navigator>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      // 商品列表
      goodsList: [],
    };
  },
  async onLoad({ cid }) {
    this.goods = {
      // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: cid || 6,
      // 否	number	页码
      pagenum: 1,
      // 否	number	页容量
      pagesize: 10,
    };
    this.total = 0;
    this.getGoodsList();
  },
  //  上拉获取内容（滚动条触底 onReachBottom）
  onReachBottom() {
    // 判断获取到的数据长度是否大于后台获取到的总条数，并弹出提示
    if (this.goodsList.length >= this.total) {
      uni.showToast({
        title: "没有更多数据~",
        icon: "none",
      });
    } else {
      // 页数+1
      this.goods.pagenum++;
      // 重新渲染数据
      this.getGoodsList();
    }
  },
  // 下拉刷新
  async onPullDownRefresh() {
    // 清空数据
    this.goodsList = [];
    this.goods.pagenum = 1;
    await this.getGoodsList();
    // 页面重新拿到数据之后，因该关闭下拉刷新，而不是默认到一定的时间自动关闭下拉刷新
    uni.stopPullDownRefresh();
  },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoodsList() {
      const res = await this.$u.get("/goods/search", this.goods);
      //   console.log(res);
      this.goodsList = [...this.goodsList, ...res.goods];
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss">
.goods_conent {
  margin: 0 26rpx;
}
.goods_item {
  //   background-color: pink;
  padding: 10rpx 0;
  border-bottom: 1px solid $themeColor;
  .goods_img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: pink;
  }
  .goods_right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 191rpx;
    // background-color: #6cf;
    .goods_title {
      font-size: 26rpx;
    }
    .goods_price {
      color: $themeColor;
    }
  }
}
</style>